<template>
  <div class="teacher-liebiao">
    <div class="lwy-contain ba-dark">
      <div class="container">
        <!-- 列表 -->
        <div class="lb">
          <!-- 选择 -->
          <div class="d-flex justify-content-start p-2">
            <span>您的选择为:</span>
          </div>
          <!-- 列表1 -->
          <div>
            <div class="d-flex justify-content-between p-2">
              <span>科目分类:</span>
              <a href="">全部</a>
              <a href="">学前</a>
              <a href="">小学</a>
              <a href="">中学</a>
              <a href="">高中</a>
              <a href="">大学</a>
              <a href="">英语</a>
              <a href="">数学</a>
              <a href="">汉语</a>
              <a href="">物理</a>
              <a href="">音乐</a>
              <a href="">美术</a>
              <a href="">小语种</a>
              <button id="btn1" style="border: 0px" class="bg-danger">
                更多>
              </button>
            </div>
            <div id="d1">
              <div class="flex-wrap clear-fix d-flex justify-content-start">
                <a href="" class="p-2">舞蹈</a>
                <a href="" class="p-2">美术</a>
                <a href="" class="p-2">书法</a>
                <a href="" class="p-2">戏剧</a>
                <a href="" class="p-2">鉴赏</a>
                <a href="" class="p-2">媒体艺术</a>
                <a href="" class="p-2">雕塑</a>
                <a href="" class="p-2">运动</a>
                <a href="" class="p-2">武术</a>
                <a href="" class="p-2">计算机</a>
                <a href="" class="p-2">计算机证书</a>
                <a href="" class="p-2">图像处理软件</a>
                <a href="" class="p-2">网页设计与制作</a>
                <a href="" class="p-2">动画制作</a>
                <a href="" class="p-2">网站开发</a>
                <a href="" class="p-2">编程</a>
                <a href="" class="p-2">数据库管理</a>
                <a href="" class="p-2">系统运维</a>
                <a href="" class="p-2">手机系统</a>
                <a href="" class="p-2">系统架构</a>
              </div>
            </div>
          </div>
          <!-- 列表2 -->
          <div>
            <div class="d-flex justify-content-between p-2">
              <span>高校分类:</span>
              <a href="">全部</a>
              <a href="">清华大学</a>
              <a href="">北京大学</a>
              <a href="">北京航空航天大学</a>
              <a href="">中国科学院大学</a>
              <a href="">中国人民大学</a>
              <a href="">中国师范大学</a>
              <a href="">北京理工大学</a>
              <button id="btn2" style="border: 0px" class="bg-danger">
                更多>
              </button>
            </div>
            <div id="d2">
              <div class="flex-wrap clear-fix d-flex justify-content-start">
                <a href="" class="p-2">中国农业大学</a>
                <a href="" class="p-2">北京科技大学</a>
                <a href="" class="p-2">北京交通大学</a>
                <a href="" class="p-2">北京邮电大学</a>
                <a href="" class="p-2">北京协和医学院</a>
                <a href="" class="p-2">中国政法大学</a>
                <a href="" class="p-2">北京化工大学</a>
                <a href="" class="p-2">首都师范大学</a>
                <a href="" class="p-2">北京工业大学</a>
                <a href="" class="p-2">对外经济贸易大学</a>
                <a href="" class="p-2">中央民族大学</a>
                <a href="" class="p-2">北京林业大学</a>
                <a href="" class="p-2">中央财经大学</a>
                <a href="" class="p-2">首都医科大学</a>
                <a href="" class="p-2">中国石油大学</a>
                <a href="" class="p-2">北京语言大学</a>
                <a href="" class="p-2">北京中医药大学</a>
                <a href="" class="p-2">中国地质大学（北京）</a>
                <a href="" class="p-2">首都经济贸易大学</a>
              </div>
            </div>
          </div>
          <!-- 列表3    -->
          <div>
            <div class="d-flex justify-content-between p-2">
              <span>老师学历:</span>
              <a href="">全部</a>
              <a href="">本科在读</a>
              <a href="">本科毕业</a>
              <a href="">硕士在读</a>
              <a href="">硕士毕业</a>
              <a href="">博士在读</a>
              <a href="">博士毕业</a>
              <a href="">在职幼儿园老师</a>
              <a href="">在职小学老师</a>
              <a href="">在职中学老师</a>
              <button id="btn3" style="border: 0px" class="bg-danger">
                更多>
              </button>
            </div>
            <div id="d3">
              <div class="flex-wrap clear-fix d-flex justify-content-start">
                <a href="" class="p-2">在职初中老师</a>
                <a href="" class="p-2">在职高中老师</a>
                <a href="" class="p-2">在职大学老师</a>
                <a href="" class="p-2">退休初中教师</a>
                <a href="" class="p-2">退休高中教师</a>
                <a href="" class="p-2">退休大学教师</a>
                <a href="" class="p-2">培训机构老师</a>
                <a href="" class="p-2">外籍留学生</a>
                <a href="" class="p-2">外籍教师</a>
                <a href="" class="p-2">大专在读</a>
                <a href="" class="p-2">大专毕业</a>
                <a href="" class="p-2">其他</a>
              </div>
            </div>
          </div>
          <!-- 列表4 -->
          <div class="d-flex p-2">
            <span>老师性别:</span>
            <div>
              <a href="" style="margin: 0 10px 0 10px">不限</a>
              <a href="" style="margin: 0 10px 0 10px">男</a>
              <a href="" style="margin: 0 10px 0 10px">女</a>
            </div>
          </div>
          <!-- 列表5 -->
          <div class="d-flex p-2">
            <span>教学方式:</span>
            <div>
              <a href="" style="margin: 0 10px 0 10px">全部</a>
              <a href="" style="margin: 0 10px 0 10px">老师上门</a>
              <a href="" style="margin: 0 10px 0 10px">机构授课</a>
            </div>
          </div>
          <!-- 列表6 -->
          <div class="d-flex p-2">
            <span>教学经验:</span>
            <div>
              <a href="" style="margin: 0 10px 0 10px">5年以下</a>
              <a href="" style="margin: 0 10px 0 10px">5年以上-10年以下</a>
              <a href="" style="margin: 0 10px 0 10px">10年以上</a>
            </div>
          </div>
          <!-- 列表7 -->
          <div class="d-flex p-2">
            <span>有无视频介绍:</span>
            <div class="">
              <a href="" style="margin: 0 10px 0 10px">不限</a>
              <a href="" style="margin: 0 10px 0 10px">有</a>
              <a href="" style="margin: 0 10px 0 10px">无</a>
            </div>
          </div>
        </div>
        <!-- 导航条 -->
        <div class="dht bg- p-2 d-flex">
          <div><a href="" class="d-inline-block"> 默认排序</a></div>
          <div><a href="" class="d-inline-block"> 口碑最佳</a></div>
          <div><a href="" class="d-inline-block"> 有视频介绍</a></div>
          <div><a href="" class="d-inline-block"> 热度排行</a></div>
          <div><a href="" class="d-inline-block"> 金牌教员</a></div>
        </div>
        <!-- 资料 -->
        <div>
          <!-- 教师资料 -->
          <div class="row p-2">
            <!-- 头像 -->
            <div class="p-2 col-2 col-md-2 col-sm-3">
              <img
                class="w-100 align-self-center"
                style="width: 180px"
                src="../assets/teacher_user0002.jpg"
                alt=""
              />
            </div>
            <!-- 资料 -->
            <div class="col-10 col-md-10 col-sm-9">
              <!-- 一行 -->
              <div class="d-flex justify-content-between mt-3">
                <div class="d-inline-block" style="">
                  <span style="font-size: 20px" class="m-3">王老师</span>
                  <img src="../assets/v4.png" style="width: 25px" alt="" /><img
                    style="width: 25px"
                    src="../assets/奖章.png"
                    alt=""
                  />
                </div>
                <div class="d-inline-block d-flex justify-content-center">
                  <span class="sex">女</span>
                  <span class="jiaoyuanbianhao">教员编号:beijing119911</span>
                  <span class="zhuceshijian">注册时间:2021-01-01</span>
                </div>
                <div class="d-flex justify-content-end">
                  <div class="d-inline-block">
                    <span style="color: rgb(247, 176, 44)">￥300</span>
                  </div>
                  <div class="d-inline-block"><span>/1.5小时</span></div>
                </div>
              </div>
              <!-- 二行 -->
              <div class="">
                <el-rate
                  style="margin: 0 20px 0 20px"
                  class="d-flex"
                  v-model="value"
                  disabled
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
                <span style="margin: 0 20px 0 20px">4年教龄</span>
                <span style="margin: 0 20px 0 20px">清华大学</span>
              </div>
              <!-- 三行 -->
              <p class="hidden-md-and-down m-3">
                大学期间，担任班级团支书，学生会文艺部部长，以及新生班级助理。
                有耐心有责任心，逻辑思维强，善于沟通交流，并且乐观开朗，幽默风趣，获得了老师和同学的一致好评！
              </p>
              <!-- 四行 -->
              <div>
                <div class="m-4 d-flex xq-xan-btn">
                  <span class="btn btn-danger">查看祥情></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value:2
    };
  },
};
</script>
<script>
$(document).ready(function () {
  $("#btn1").click(function () {
    $("#d1").toggle();
  });
});
$(document).ready(function () {
  $("#btn2").click(function () {
    $("#d2").toggle();
  });
});
$(document).ready(function () {
  $("#btn3").click(function () {
    $("#d3").toggle();
  });
});
</script>

<style scoped>
.sex,.jiaoyuanbianhao,.zhuceshijian{
  margin: 0 10px 0 10px;
}
#btn1,#btn2,#btn3{
  color: #fff;
}
.lb > div {
  border-top: 1px dashed rgb(119, 116, 116);
}
a {
  text-decoration: none;
  color: rgb(54, 46, 46);
}
.zl-tx {
  width: 180px;
  height: 180px;
}
.lwy-xq-tx {
  width: 25px;
}
.dht > div {
  margin: 0 10px 0 10px;
}
.xq-xan-btn {
  justify-content: end;
}
.zl {
  width: 100%;
}
.xq-jj {
  text-align: left;
}
.dht {
  margin: 10px 0 10px 0;
  background-color: rgb(223, 215, 215);

  font-weight: 600;
}
.xq-jbxx-jg {
  color: rgb(247, 176, 44);
}
</style>